<script setup>
import {reactive, ref} from "vue";
import {message} from "ant-design-vue";
import {addObject} from "@/api/api";
import {defineEmits} from 'vue'

const emit = defineEmits(['update'])


const open = ref(false);
const showDrawer = () => {
  open.value = true;
};

const information = reactive({
  uno: '',
  pwd: '',
  role: 2,
})

const commit = () => {
  if(information.uno === '' || information.pwd === ''){
    message.warn("信息不能为空")
  }else{
    console.log(information);
    const data = {
      uno: information.uno,
      pwd: information.pwd,
      role: information.role,
      info:{
        name: '',
        age: 0,
        msg: '',
        gender: ''
      }
    }
    addObject(data, "user").then(res => {
      if(res.data.status === 200){
        console.log(res.data.data)
        // location.reload()
        message.success("添加成功")
        information.uno = ''
        information.pwd = ''
      }else{
        message.warn("添加失败")
      }
    })
  }
}

</script>

<template>
  <a-button type="primary" @click="showDrawer">Add</a-button>
  <a-drawer
      v-model:open="open"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      title="添加教师"
      placement="right"
      @close="emit('update')"
  >
    <div>
      <a-input style="margin-top: 2rem" v-model:value="information.uno" placeholder="Uno" />
      <a-input style="margin-top: 2rem" v-model:value="information.pwd" placeholder="Pwd" />
    </div>
    <div style="margin-top: 2rem">
      <a-button type="primary" @click="commit">
        Submit
      </a-button>
    </div>
  </a-drawer>
</template>

<style scoped>

</style>